<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/ajax2.js"></script>
</head>

<body>
    <button>测试1</button>

    <!-- 每次都需要这样定义吗？ -->
   <!--  <script>
        function func10(data){
           console.log("该函数被调用了，data是从服务端获取的数据 "+data);
           console.log(data)//{name: "比屋教育"}
       }
    </script> -->


    <script>
        const btnArr = document.querySelector("button")
        /* 
            url：http://www.biwuit.cn/spboot/test5?callback=func10
            返回值：func10({name: "比屋教育05"})
        */
        btnArr.onclick = function () {
            jsonp({
                funcname: 'func10',
                url: 'http://www.biwuit.cn/spboot/test5',
                data: {
                    name: 'lisi',
                    age: 22
                },
                success: function (data) {
                    console.log("执行成功")
                    console.log(data)
                }
            })
        }



        /* 
            封装jsonp的加载过程
            options{
                funcname:''
                url:''
                data:{
                    name: 'lisi',
                    age:22
                },
                调用成功的执行函数
                success:function(data){

                }
            }
        */


        // function jsonp(options) {
        //     //创建一个script标签
        //     const scriptObj = document.createElement("script")
        //     let params = ''

        //     for (const key in options.data) {
        //         params += '&'+ key + '=' + options.data[key] 
        //     }
        //     //生成函数的名称
        //     //调用服务端url
        //     scriptObj.src = options.url + "?callback=" + options.funcname + params;

        //     //将options.funcname变成全局的
        //     window[options.funcname] = options.success;
        //     // console.dir(window)
            
        //     //执行加删除
        //     document.body.appendChild(scriptObj)
        //     scriptObj.parentNode.removeChild(scriptObj)


        //     /* 
        //         func10({name: "比屋教育05"})    Uncaught ReferenceError: func10 is not defined
        //         解决思路：  func10 一定要在全局存在，可以执行的
        //     */

        // }

    </script>
</body>

</html>